<template>
  <view class="order-container">
    <!-- 订单页上边导航组件 -->
    <view class="tabbar">
      <view class="tabbar-title">
        <view v-for="(item, index) in titles" :key="index" :class="['tabbar-item',item.isActive ? 'active' : '']"
          @click="changeTab(index)">
          {{ item.name }}
        </view>
      </view>
    </view>
    <!-- 订单详情 -->
    <uni-swipe-action>
      <block v-for="(item,index) in orderList" :key="index">
        <uni-swipe-action-item :right-options="options" @click="deleteOrder(item.order_number)">
          <my-order-goods :order="item" :currentIndex="currentIndex"></my-order-goods>
        </uni-swipe-action-item>
      </block>
    </uni-swipe-action>

    <!-- 没有订单时展示的空页面 -->
    <view class="empty-order" v-if="orderList.length===0">
      <text>{{emptyTip}}</text>
    </view>
  </view>
</template>

<script>
  import { mapState, mapGetters, mapMutations } from 'vuex'
  export default {
    data() {
      return {
        // 订单左滑删除的配置项
        options: [{
          text: '删除',
          style: {
            backgroundColor: '#C00000'
          }
        }],
        // 上方导航栏信息
        titles: [{
            index: 0,
            name: '全部',
            isActive: true
          },
          {
            index: 1,
            name: '待付款',
            isActive: false
          },
          {
            index: 2,
            name: '待发货',
            isActive: false
          },
          {
            index: 3,
            name: '待收货',
            isActive: false
          },
          {
            index: 4,
            name: '退款/售后',
            isActive: false
          }
        ],
        // 传递给my-order-goods组件的订单数组
        orderList: [],
        // 订单列表为空时的提示
        emptyTip: '',
        // 当前在哪一个标签页
        currentIndex: 0
      };
    },
    onLoad(options) {
      uni.setNavigationBarTitle({
        title: '我的订单'
      })
      const index = Number(options.index)
      this.changeTab(index)
    },
    methods: {
      ...mapMutations('m_user', ['getOrderInfo']),
      // 切换tab标签
      changeTab(index) {
        this.currentIndex = index
        // 根据不同的标签页，切换不同的订单数组；为每个标签页设置不同的emptyTip
        switch (index) {
          case 0:
            this.orderList = this.order;
            this.emptyTip = '暂无订单'
            break;
          case 1:
            this.orderList = this.orderWaitPay;
            this.emptyTip = '暂无待付款订单'
            break;
          case 2:
            this.orderList = this.orderWaitDeliver;
            this.emptyTip = '暂无待发货订单'
            break;
          case 3:
            this.orderList = this.orderWaitReceive;
            this.emptyTip = '暂无待收货订单'
            break;
          case 4:
            this.orderList = this.orderReturn;
            this.emptyTip = '暂无退款/售后订单'
            break;
          default:
            break;
        }
        this.titles.forEach((item) => {
          if (item.isActive) item.isActive = false
        })
        this.titles[index].isActive = true
      },
      // 删除订单
      deleteOrder(order_number) {
        uni.showModal({
          title: '提示',
          content: '确认删除订单吗？',
          success: async (res) => {
            if (res.confirm) {
              const { data: res1 } = await uni.$http.post('/api/public/v1/my/orders/delete', { order_number })
              if (res1.meta.status !== 200) return uni.$showMsg('删除订单失败！')
              // 删除订单成功，重新获取订单数据保存到本地
              this.getOrderInfo()
              // 上句代码执行完后，vuex仓库和数据库中该订单已删除，但是当前所在标签页未刷新，此处手动修改
              this.orderList = this.orderList.filter(item => item.order_number !== order_number)
              uni.showToast({
                icon: 'success',
                title: '删除订单成功'
              })
            } else if (res.cancel) {
              //什么都不做
            }
          },
          fail: (err) => uni.$showMsg('删除订单失败！')
        })
      }
    },
    computed: {
      ...mapState('m_user', ['order']), // 全部订单
      //                          待支付订单         待发货订单         待收货订单     已收货（交易完成）订单  退款/售后订单
      ...mapGetters('m_user', ['orderWaitPay', 'orderWaitDeliver', 'orderWaitReceive', 'orderComplete', 'orderReturn'])
    }
  }
</script>

<style lang="scss" scoped>
  .order-container {
    .tabbar {
      background-color: #fff;
      border-bottom: 1px solid #F4F4F4;
      box-sizing: border-box;

      .tabbar-title {
        display: flex;
      }

      .tabbar-item {
        font-size: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        padding: 15rpx 0;
      }

      .active {
        color: #C00000;
        border-bottom: 5rpx solid;
      }
    }

    .empty-order {
      color: gray;
      font-size: 14px;
      text-align: center;
      position: relative;
      top: 230px;
    }
  }
</style>
